<template>
    <div class="goodsInfo">
        <Navbar title="详情页面"></Navbar>
        <!-- 购物车小球动画特效 -->
            <!-- before-enter在进入之前
            enter 进入
            after-enter进入之后 -->
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div id="ball" class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>


        <div class="mui-card">
            <!-- 内容区域 -->
            <div class="mui-card-content"> 
                <div class="mui-card-content-inner">
                    <Swipe :imgList="infoImgArr" :isFull="false"></Swipe>
                </div>
            </div>
        </div>

        <!-- 商品基本信息购买区域 -->
        <div class="mui-card"> 
            <!-- 内容区 -->
            <div class="mui-card-header">{{infoArr.title}}</div>
            <div class="mui-card-content">
                <p class="btn2">
                    市场价:{{infoArr.oldPrice}} <del>销售价:{{infoArr.newPrice}}</del>
                </p>
                <p class="btn2">
                    <Numberbox @getNumber="CarNum"></Numberbox>
                </p>
                <p class="btn2">
                    <mt-button type="primary" size="small">立刻购买</mt-button>
                    <mt-button type="danger" size="small" @click="addShopCar">加入购物车</mt-button>
                </p>
            </div>
        </div>

        <!-- 商品评论和商品参数区域-->
        <div class="mui-card">
            <!-- 内容区域 -->
            <div class="mui-card-header">商品标号</div>
            <div class="mui-card-content">
                <div class="nui-card-content-inner">
                    <p>商品ID:{{infoArr.id}}</p>
                    <p>库存量:{{infoArr.inStock}}</p>
                    <p>上架时间:{{infoArr.gmtCreate}}</p>
                    <p>
                        <mt-button type="primary" size="large" plain @click="toShopDetail">商品详情</mt-button>
                        <mt-button type="danger" size="large" plain @click="toSetComment">发表评论</mt-button>
                    </p>
                </div>
            </div>
        </div>


        <!-- <Comment type="2"></Comment> -->
    </div>
</template>
<script>
    import {Toast} from "mint-ui"
    // import 'static/mui/css/mui.css'
    export default{
        name:"goodsInfo",
        data(){
            return{
                infoId:this.$route.query.id,
                infoArr:{},
                infoImgArr:[],
                addShopCarId:1,  //购物车数量
                ballFlag:false
            }
        },
        created(){
            this.imgList()
            this.goodsInfoArr()
        },
        methods:{

            //加入购物车按钮
            addShopCar(){
                // console.log(this.addShopCarId)
                //把数字  挂载购物车旁边
                // console.log(1)
                this.ballFlag = true
                console.log(this.infoArr)

                //加入购物   组装购物车的数据
                let gwCar = {
                    title:this.infoArr.title,
                    img:this.infoArr.imgUrl,
                    info:this.infoArr.goodsInfo,
                    price:this.infoArr.newPrice,
                    num:this.addShopCarId
                }
                //通过post接口 把数据发送给购物车页面
                this.$axios.post("/saveShopcar",gwCar)
                .then(res=>{
                    Toast(res.data)
                }).catch(err=>{
                    console.log(err)
                })

            },
            // 小球进去之前
            //el自带的值    小球起始位置
            beforeEnter(el){
                el.style.transform = "translate(0,0)"
            },
            // 小球进入之后
            enter(el,done){
                el.offsetWidth;
                // 1. 球的起点
                const qidian = this.$refs.ball.getBoundingClientRect();
                // 2. 购物车落点
                const luodian  = document.getElementById("spanShopCar").getBoundingClientRect();
                const x = luodian.left-qidian.left
                const y = luodian.top-qidian.top
                // 球的落点
                el.style.transform = `translate(${x}px,${y}px)`
                // el.style.transform = "translate(155px,188px)"
                el.style.transition = "all 1s cubic-bezier(.10,-0.3,1,.88)";
                done()
            },
            // 小球进入之后
            afterEnter(el){
                // console.log(155555)
               
                document.getElementById("spanShopCar").innerText =  this.addShopCarId
                // this.ballFlag = !this.ballFlag
            },

            //去往商品详情页面函数
            toShopDetail(){
                // 路由跳转、
                this.$router.push({name:"shopDetail"})
            },
            //去往发表评论函数
            toSetComment(){
                // 路由跳转
                this.$router.push({name:"shopComment"})

            },
            // 拿到商品信息轮播图函数
            imgList(){
                this.$axios.get("/getImgList?goodId="+this.infoId)
                .then(res=>{
                    //拿到  轮播图 数据给到全局组件
                    this.infoImgArr = res.data
                    // console.log(res.data)
                    
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            // 拿到商品信息函数
            goodsInfoArr(){
                this.$axios.get("selectGoodsInfoById?id="+this.infoId)
                .then(res=>{
                    //把值给到新数组   渲染详情页面
                    this.infoArr = res.data
                    //拿到id传回的图片 加到轮播图的 第一页
                    this.infoImgArr.unshift({
                        img:res.data.imgUrl
                    })
                    console.log(res.data)
                })
                .catch(err=>{
                    console.log(err)
                })
            },
            //购买数量 拿到的值函数 传给  addShopCarId
            CarNum(e){
                console.log("购买数量"+e)
                this.addShopCarId =  e
            }
            

        }
    }
</script>
<style scoped>
    .info{
        margin-top:40px;
        margin-bottom: 60px;
    }
    .goodsInfo{
        margin-top: 40px;
        margin-bottom: 60px;
        /* background-color: #eee; */
        overflow: hidden;
    }
    .now_price {
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .mui-card-footer {
        display: block;
    }
    button {
        margin: 15px 0;
    }
    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: 430px;
        left: 82px;
        z-index: 99;
    }
    
  
</style>